<template>
  <div>
 

    <!-- 表格整体 -->
    <common-table
      :table-attrs="tableAttrs"
      @multiple="selectHandler"
      @controller="controllerHandler"
    >
    
      <template #default>
        <!-- 表格内搜索表单 -->
        <common-form
          :form-infos="searchForm"
          :form-attrs="{
            'label-width': 'auto',
            'label-position': 'left',
            size: 'medium ',
            inline: true,
          }"
          @submit="onSearchSubmit"
        />
        <el-button size="small" @click="isShowDialog = !isShowDialog"
          >添加数据</el-button
        >
      </template>
      <!-- 表格展开信息 -->
      <template #expand="props">
        {{ props.props.row }}
      </template>
    </common-table>
    <!-- 弹出框编辑表单 -->
    <el-dialog title="编辑名称" v-model="isShowDialog">
      <common-form
        :form-infos="editForm"
        :form-attrs="{
          'label-width': 'auto',
          'label-position': 'left',
          size: 'small',
          inline: true,
        }"
        @submit="onEditSubmit"
      />
    </el-dialog>
  </div>
</template>

<script>
import { defineComponent, shallowReactive, ref } from "vue";

export default defineComponent({
  setup() {
    const tableAttrs = shallowReactive({
      // Table Attributes
      name: "续签申请",
      infos: [
        "当前页面针对续签申请进行管理，可以针对续签申请审核支付操作。",
        "续签流程：会员续签申请上传支付凭据->审核支付信息->审核通过延续入驻时间。"
      ],
      attrs: {
        data: [
          //表格需要的数据
          {
            date: "2016-05-02",
            name: "王小虎",
            address: "上海市普陀区金沙江路 1518 弄",
          },
          {
            date: "2016-05-04",
            name: "王小虎",
            address: "上海市普陀区金沙江路 1517 弄",
          },
          {
            date: "2016-05-01",
            name: "王小虎",
            address: "上海市普陀区金沙江路 1519 弄",
          },
          {
            date: "2016-05-03",
            name: "王小虎",
            address: "上海市普陀区金沙江路 1516 弄",
          },
        ],
        ref: "multipleTable",
        style: "100%",
      },
      // Table-column Attributes
      column: [
        {
          prop: "name",
          label: "姓名",
        },
        {
          prop: "address",
          label: "地址",
        },
        {
          prop: "date",
          label: "日期",
          sortable: true,
        },
      ],
      // 操作按钮
      controller: ["申请详情"],
    });

    //搜索表单配置
    const searchForm = shallowReactive([
      {
        id: 1,
        name: "CommonSelect",
        prop: "s3",
        value: "",
        options: {
          "1": "全部",
          "2": "自营专卖点",
          "3": "生鲜",
          "3": "官方直营店",
        },
        formItemAttrs: {
          label: "主营行业",
        },
        inputAttrs: {
          placeholder: "全部",
        },
      },
      {
        id: 2,
        name: "CommonSelect",
        prop: "s4",
        value: "",
        options: {
          "1": "全部",
          "2": "标准店铺",
          "3": "专卖店铺",
          "3": "店铺",
        },
        formItemAttrs: {
          label: "开店套餐",
        },
        inputAttrs: {
          placeholder: "全部",
        },
      },
      {
        id: 3,
        name: "CommonSelect",
        prop: "s4",
        value: "",
        options: {
          "1": "全部",
          "2": "标准店铺",
          "3": "专卖店铺",
          "3": "店铺",
        },
        formItemAttrs: {
          label: "开店套餐",
        },
        inputAttrs: {
          placeholder: "全部",
        },
      },
      {
        id: 4,
        name: "CommonInput", //组件名
        prop: "s1", //搜索字段名
        value: "", //可以为 字符串、数组、数值根据组件绑定的类型来配置
        formItemAttrs: {
          //el-form-item 需要传入的 Form-Item Attributes
          label: "店铺名称",
        },
        inputAttrs: {
          //表单组件需要传入的对应的 Attributes
          type: "text",
          placeholder: "请输入店铺名称",
           "input-style":{width:"221px"},
        },
      },
    ]);

    //编辑表单配置
    const editForm = shallowReactive([
      {
        id: 1,
        name: "CommonInput",
        prop: "f1",
        value: "",
        formItemAttrs: {
          label: "字段",
        },
        inputAttrs: {
          type: "text",
          placeholder: "请输入内容",
        },
      },
      {
        id: 2,
        name: "CommonInput",
        prop: "f2",
        value: "",
        formItemAttrs: {
          label: "字段",
        },
        inputAttrs: {
          type: "text",
          placeholder: "请输入内容",
        },
      },
    ]);

    //弹出框绑定
    let isShowDialog = ref(false);

    //表格多选框触发
    const selectHandler = (val) => {
      console.log(val);
    };

    //表格操作按钮触发
    const controllerHandler = (type, row) => {
      console.log(type, row);
    };

    //搜索表单提交
    const onSearchSubmit = (data) => {
      console.log("search", data);
    };

    //编辑表单提交
    const onEditSubmit = (data) => {
      console.log("edit", data);
    };

    return {
      tableAttrs,
      searchForm,
      editForm,
      isShowDialog,
      selectHandler,
      controllerHandler,
      onSearchSubmit,
      onEditSubmit,
    };
  },
});
</script>
